<template>
  <t-dialog v-model:visible="formVisible" header="数据源管理" :footer="false" width="800px" @close="close">
    <t-space direction="vertical">
      <t-row>
        <t-button @click="add">
          <template #icon><add-icon /></template>
          新增
        </t-button>
        <t-button @click="refresh">
          <template #icon><refresh-icon /></template>
          刷新
        </t-button>
      </t-row>

      <t-table
        table-layout="auto"
        bordered
        :data="renderData"
        :columns="columns"
        row-key="id"
        :hover="true"
        :loading="loading"
        size="small"
      >
        <template #operations="{ row }">
          <t-space>
            <t-button variant="text" size="small" theme="primary" @click="edit(row)">
              <template #icon>
                <edit-icon />
              </template>
              编辑
            </t-button>
            <t-popconfirm content="此操作将永久删除该数据源, 是否继续?" theme="danger" @confirm="del(row.id)">
              <t-button v-permission="authority.SYS_LOG_DEL" variant="text" size="small" theme="danger">
                <template #icon>
                  <delete-icon />
                </template>
                删除
              </t-button>
            </t-popconfirm>
          </t-space>
        </template>
      </t-table>
    </t-space>
  </t-dialog>
  <ds-form v-model:visible="dsDialogFormVisible" :form-data="formData" />
</template>

<script setup lang="ts">
import { AddIcon, DeleteIcon, EditIcon, RefreshIcon } from 'tdesign-icons-vue-next';
import { MessagePlugin } from 'tdesign-vue-next';
import { computed, ref } from 'vue';
import { useRequest } from 'vue-request';

import { datasourceList, deleteDs } from '@/api/upms/gen';
import { useVisible } from '@/hooks/visible';
import authority from '@/utils/authority';

import DsForm from './ds-form.vue';

const columns = [
  { title: '数据源名称', colKey: 'name' },
  { title: 'url', colKey: 'url', ellipsis: true },
  { title: '用户名 ', colKey: 'username' },
  { title: '密码', colKey: 'password' },
  { title: '创建时间', colKey: 'createTime' },
  { title: '操作', colKey: 'operations' },
];

const { data, loading, refresh } = useRequest(datasourceList);

const renderData = computed(() => data.value || []);

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits<{
  (e: 'update:visible', v: boolean): void;
}>();

const formData = ref({});

const { formVisible, close } = useVisible(props, emit);

const dsDialogFormVisible = ref(false);

const add = () => {
  dsDialogFormVisible.value = true;
  formData.value = {};
};
const edit = (e: any) => {
  dsDialogFormVisible.value = true;
  formData.value = { ...e };
};
const del = async (id: string) => {
  await deleteDs(id).then(() => {
    MessagePlugin.success('删除成功');
    refresh();
  });
};
</script>

<style lang="less" scoped>
.choose-area {
  display: flex;
  flex-wrap: wrap;
  > div {
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    line-height: 1;

    &:hover {
      background: rgba(0, 0, 0, 0.13);
    }
  }

  overflow-y: auto;
}

.icon-show {
  > :deep(svg) {
    width: 40px;
    height: 40px;
  }
}
</style>
